<template>
  <div>
    <div class="text">
      <span>贾子怡~  我爱你呀</span>
    </div>
    <div class="heart"></div>
    <div class="zhijing">
      <span>by: 盖献康</span>
    </div>
  </div>
</template>

<script>

</script>

<style scoped lang="scss">
.zhijing {
  font-size: 15pt;
  position: absolute;
  left: 56%;
  top: 70%;
  span {
    color: #de978c;
  }
}
.text {
  font-size: 18pt;
  position: absolute;
  left: 43%;
  top: 26%;
  span {
    color: #ecbbea;
  }
}
.heart {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 105px;
  height: 105px;
  margin: -52.5px 0 0 -52.5px;
  animation: beat 1s infinite alternate;
}

.heart::before {
  content: "";
  display: block;
  transition: all 400ms;
  width: 15px;
  height: 15px;
  margin: -15px 0 0 -15px;
  box-shadow:
    30px 15px #8e1a19, 45px 15px #ac0500, 75px 15px #f73f0c, 90px 15px #fa5f27,
    15px 30px #740100, 30px 30px #8e0500, 45px 30px #8e1918, 60px 30px #ca1300, 75px 30px #f73f0c, 90px 30px #fa5f27, 105px 30px #f77c2a,
    15px 45px #4b0000, 30px 45px #690100, 45px 45px #8e0f0b, 60px 45px #bf1000, 75px 45px #f84010, 90px 45px #f04222, 105px 45px #fa5724,
    15px 60px #451312, 30px 60px #5a0100, 45px 60px #840e0c, 60px 60px #a51d1a, 75px 60px #ed2805, 90px 60px #d9321e, 105px 60px #f44622,
    30px 75px #3b0000, 45px 75px #5d1a1b, 60px 75px #8e1a19, 75px 75px #a80700, 90px 75px #b90a00,
    45px 90px #3d0000, 60px 90px #551415, 75px 90px #670100,
    60px 105px #340000;
}
@keyframes beat {
  to {
    transform: scale(1.2)
  }
}
</style>
